<template>
    <div id="dict">
        <section class="list-component">
            <el-form class="search-bar" :inline="true" :model="filterType">
                <el-form-item label="字典名称">
                    <el-input v-model="filterType.name" placeholder="请输入字典名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="getDictTypeList">查询</el-button>
                </el-form-item>
            </el-form>
            <div class="list">
                <div class="button-bar">
                    <el-button class="btn" type="primary" size="mini" icon="el-icon-plus" @click="onAddDictType" >新建</el-button>
                    <el-button class="btn" type="warning" size="mini" icon="el-icon-edit" @click="onEditDictType" >编辑</el-button>
                    <el-button class="btn" type="danger" size="mini" icon="el-icon-delete" @click="onDeleteDictType" >删除</el-button>
                </div>
                <el-table :data="dictTypeList.data"  stripe ref="dictTypeList" :highlight-current-row="true" :default-sort = "{prop: 'dictType'}" @select-all="onSelectAllType" @select="onSelectType" @row-click="onClickType">
                    <el-table-column type="selection"   align="center" width="50" ></el-table-column>
                    <el-table-column type="index" label="序号" prop="index" align="center" width="60px" ></el-table-column>
                    <el-table-column label="字典名称" prop="name " align="center" width="" >
                        <slot slot-scope="scope">
                            <span :title="scope.row.name">{{scope.row.name}}</span>
                        </slot>
                    </el-table-column>
                    <el-table-column label="code" prop="code " align="center" width="" >
                        <slot slot-scope="scope">
                            <span :title="scope.row.code">{{scope.row.code}}</span>
                        </slot>
                    </el-table-column>
                    <el-table-column label="类别" prop="class" align="center" width="" v-if="false"></el-table-column>
                </el-table>
            </div>
        </section>
        <section class="list-component">
            <el-form class="search-bar" :inline="true" :model="filter" >
                <el-form-item label="键名">
                    <el-input v-model="filter.name" placeholder="请输入键名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="getDictKeyList">查询</el-button>
                </el-form-item>
            </el-form>
            <div class="list">
                <div class="button-bar">
                    <el-button class="btn" type="primary" size="mini" icon="el-icon-plus" @click="onAddDictKey">新建</el-button>
                    <el-button class="btn" type="warning" size="mini" icon="el-icon-edit" @click="onEditDictKey" >编辑</el-button>
                    <el-button class="btn" type="danger" size="mini" icon="el-icon-delete" @click="onDeleteDict" >删除</el-button>
                </div>
                <el-table :data="dictKeyList.data" ref="dictKeyList" @select-all="onSelectAll" @select="onSelect" :default-sort = "{prop: 'sort'}">
                    <el-table-column type="selection"     align="center" width="50" ></el-table-column>
                    <el-table-column type="index" label="序号" prop="index" align="center" width="60px" ></el-table-column>
                    <el-table-column label="键名" prop="name" align="center" width="" ></el-table-column>
					<el-table-column label="code" prop="code" align="center" width="" ></el-table-column>
                    <el-table-column label="排序"  prop="sort"  align="center"  width=""></el-table-column>
                </el-table>
            </div>
        </section>
        <el-dialog  :title="dialogTitle"   :visible.sync="showDialog" >
            <component v-bind:is="curComponent"  @closeDialog="closeDialog" :initData="initData" @update="onUpdate"></component>
        </el-dialog>
    </div>
</template>
<script>
import editDictType from './edit-dict-type.vue'
import editDictKey from './edit-dict-key.vue'
export default {
    components:{editDictType,editDictKey},
    data(){
        return{
            filterType:{
                name:''
            },
            filter: {
                name:''
            },
            dictTypeList:{
                pageNum:1,//页码
                pageSize:25,
                total:5,//总共条数
                data:[]
            },
            dictKeyList:{
                pageNum:1,//页码
                pageSize:25,
                total:5,//总共条数
                data:[]
            },

            showDialog:false,
            curComponent:editDictType,//当前组件，editUser/导入/到处...
            optType:'type',//type||key
            dialogTitle:'新增字典类型',//'编辑字典类型'...
            checkedType:[],
            checkedKey:[],
            initData:{},
            
        }
    },
    watch:{
        showDialog(newVal){
            if(!newVal){
                this.onUpdate(this.optType)
            }
        }
    },
    methods:{
        //查询字典类型
        getDictTypeList(){
            if(this.$refs.dictTypeList){
                this.checkedType=[];
                this.$refs.dictTypeList.clearSelection();
            }
            var submitData={
				...this.filterType,
				pid:"0"
			}
            this.$http.getDictTypeList(submitData)
            .then((res)=>{
				var data=res.data.data ||[];
                this.dictTypeList.data = data;
            }).catch((err)=>{
                throw(err)
            })
        },

        //根据类型查询字典列表
        getDictKeyList(pageNum){
            if(this.$refs.dictKeyList){
                this.checkedKey=[];
                this.$refs.dictKeyList.clearSelection();
            }
            var submitData={
                ...this.filter,
				parentCode:this.checkedType[0].code
            };
            this.$http.getDictKeyList(submitData)
            .then((res)=>{
                var data=res.data.data ||[];
				this.dictKeyList.data=data;
            }).catch((err)=>{
                throw(err)
            })
        },
        
        //更新数据
        onUpdate(type){
            if(type==='type'){
                this.getDictTypeList()
            }else if(type==='key'){
                this.getDictKeyList()
            }
        },

        onClickType(rowData,column,event){
            this.optType='type'
            this.$refs.dictTypeList.clearSelection();
            this.checkedType=[rowData]
            this.$refs.dictTypeList.setCurrentRow(rowData)
            this.filter.parentId=rowData.id
			this.filter.parentCode=rowData.code
            this.getDictKeyList()
        },

        //添加字典类型
        onAddDictType(){
            this.optType='type'
            this.checkedType=[];
            this.$refs.dictTypeList.clearSelection();
            this.dialogTitle="新建字典类型";
            this.curComponent = editDictType;
            this.showDialog=true
            this.$nextTick(()=>{
                this.setInitData()
            })

        },

        onEditDictType(){
            this.optType='type'
            if(this.checkedType.length>1){
                this.$message.warning("只能选中一个");
                return
            }else if(this.checkedType.length===0){
                this.$message.warning("请选中要编辑的字典类型");
                return
            }
            this.dialogTitle="编辑字典类型";
            this.curComponent = editDictType;
            this.showDialog=true
            this.$nextTick(()=>{
                this.setInitData()
            })
        },

        onDeleteDictType(){
           // this.$message.warning("暂不支持删除,否则将导致系统异常!")
           // return
           if(this.checkedType.length===0){
               this.$message.warning("请选中要删除的字典!")
               return
           }else if(this.checkedType.length>1){
			   this.$message.warning("暂时只支持一个一个删除!")
			   return
		   }
            this.optType='type'
            let ids=this.checkedType.map((item)=>{
                return item.id
            });
			let id=this.checkedType[0].id
            let submitData={id:id,moduleName:"数据字典"}
            this.$http.deleteDict(submitData)
            .then((res)=>{
                this.$message.success("删除成功!")
                this.getDictTypeList()//重新加载列表
            }).catch((err)=>{
                throw(err)
            })
        },

        //添加字典key
        onAddDictKey(){
            this.optType='key'
            if(this.checkedType.length===0){
                this.$message.warning("请先点选左侧类型")
                return
            }
            this.checkedKey=[];
            this.$refs.dictKeyList.clearSelection();
            this.dialogTitle="新建字典键名";
            this.curComponent = "editDictKey";
            this.showDialog=true
            this.$nextTick(()=>{
                this.initData=this.checkedType[0]
            })
            
        },

          //编辑字典
        onEditDictKey(index,row){
            this.optType='key'
            if(this.checkedKey.length>1){
                this.$message.warning("只能选中一个");
                return
            }else if(this.checkedKey.length===0){
                this.$message.warning("请选中要编辑的键");
                return
            }
            this.dialogTitle="编辑字典键名";
            this.curComponent = "editDictKey";
            this.showDialog=true
            this.$nextTick(()=>{
                this.initData=this.checkedKey[0]
				this.initData.typeName=this.checkedType[0].name
            })
        },

        //删除字典
        onDeleteDict(index,row){
           // this.$message.warning("暂不支持删除,否则将导致系统异常!")
           // return
           if(this.checkedKey.length==0){
               this.$message.warning("请选中要删除的键!")
               return
           }else if(this.checkedKey.length>1){
			   this.$message.warning("目前只支持一个一个删除!")
			   return
		   }
            this.optType='key'
            let ids=this.checkedKey.map((item)=>{
                return item.id
            });
			let id=this.checkedKey[0].id
            let submitData={id:id,moduleName:"数据字典"}
            this.$http.deleteDict(submitData)
            .then((res)=>{
                this.$message.success("删除成功!")
                this.getDictKeyList()//重新加载列表
            }).catch((err)=>{

            })
        },

        onSelectAllType(selection){
            this.checkedType=selection
        },

        onSelectType(selection,row){
            this.checkedType=selection
        },
      
        //全选
        onSelectAll(selection){
            this.checkedKey=selection
        },
        //选择
        onSelect(selection,row){
            this.checkedKey=selection
        },

        //设置initData
        setInitData(){
            if(this.optType==='type'){
				this.initData=this.checkedType[0]
            }else if(this.optType==='key'){
                this.initData=this.checkedKey[0]
            } 
        },

        closeDialog(bool){
            this.showDialog=bool
        },
		
    },
    created(){
        this.getDictTypeList();
        //this.getDictKeyList();
      
    }

}
</script>
<style scoped lang="scss">
#dict{
    height:100%;
    display:flex;
    flex-direction:row;
    
}

.dict-type,.dict-list{
    margin:10px;
    //border:1px solid #eee;
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .list{
        flex:1;
        display:flex;
        flex-direction: column;
        overflow:hidden;
        .button-bar{
            margin:10px;
        }
        .el-table{
            flex:1;
            overflow:auto;
        }
    }
    
}
.dict-type{
    padding-right: 10px;
    border-right: 1px solid #eee;
}
.dict-list{
    margin-left:0px;
}
/deep/ .el-table{
	overflow: auto;
}
</style>

